<template>
	<div class="preview">
		<div class="preview_warp">
			<div class="carousel">
				<el-carousel arrow="never" height="375px" @change="handleChange" indicator-position="none" loop>
					<el-carousel-item v-for="(item, index) in info.bannerList" :key="index">
						<el-image class="carousel_img" :src="item.content"></el-image>
					</el-carousel-item>
				</el-carousel>
				<div class="carousel_index">
					<span class="carousel_index_content">{{index}}/{{info.bannerList.length}}</span>
				</div>
			</div>
			<div class="preview_warp_info">
				<div class="preview_warp_info_name view-clamp">{{info.productName}}</div>
				<div class="preview_warp_info_tip">
					<div class="preview_warp_info_tip_sider">
						<div class="left">
							<span class="left_info">心意价</span>
							<span class="left_salePrice">{{$util.prices(info.salePrice)}}</span>
							<span class="left_originPrice">{{$util.prices(info.originPrice)}}</span>
						</div>
					</div>
					<div class="preview_warp_info_tip_sider">
						<span class="right">全场包邮</span>
					</div>
				</div>
			</div>
			<div class="preview_warp_content">
				<div class="preview_warp_content_tip">商品详情</div>
				<el-image
					:src="item.content" v-for="(item, index) of info.detailList"
					class="preview_warp_content_img"
					lazy
					:key="index"></el-image>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
		name: "GOODS_PREVIEW",
		props: {
			transData: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				info: this.transData || {},
				index: 1
			}
		},
		// watch: {
		// 	transData(newVal, oldVal) {
		// 		console.log(newVal, oldVal)
		// 		this.info = newVal
		// 	}
		// },
     	methods: {
			onPreviewPage() {
				this.$emit('ClosePreviewPage', false)
			},
			updateData() {
				this.info = { ...this.transData }
			},
			handleChange(e) {
				this.index = e + 1
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.preview {
		height: 850px;
		overflow: auto;
		&_warp {
			width: 375px;
			border: 1px solid #eee;
			margin: 0 auto;
			.carousel {
				position: relative;
				width: 100%;
				&_img {
					width: 100%;
				}
				&_index {
					position: absolute;
					bottom: 10px;
					right: 16px;
					z-index: 9;
					width: 34px;
					height: 26px;
					line-height: 26px;
					background:rgba(18,18,18,0.7);
					border-radius:13px;
					&_content {
						display: flex;
						align-content: center;
						justify-content: center;
						font-size:12px;
						font-weight:400;
						color:rgba(249,249,249,1);
					}
				}
			}
			
			&_info {
				width: 100%;
				background: #ffffff;;
				padding: 16px;
				&_name {
					width: 343px;
					min-height: 54px;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
				&_tip {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&_sider {
						.left {
							font-size: 14px;
							color: #FF0505;
							&_info {
								font-size:15px;
								font-weight:400;
							}
							&_salePrice {
								font-size: 24px;
								margin: 0 8px;
								&::before {
									content: "¥";
									font-size: 70%;
								}
							}
							&_originPrice {
								text-decoration: line-through;
								color: #999999;
								&::before {
									content: "¥";
								}
							}
						}
						.right {
							font-size:12px;
							font-weight:400;
							color:rgba(153,153,153,1);
						}
					}
				}
			}
			&_content {
				width: 100%;
				&_tip {
					display: flex;
					align-items: center;
					justify-content: center;
					height:36px;
					font-size:16px;
					font-weight:400;
					color:#666666;
					background-color: #F7F7F7;
				}
				&_img {
					width: 100%;
				}
			}
		}
	}
</style>
